<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<style>
	.title{
		color:#0000FF;
		font-weight:bold;
		font-size:14px;	
	}
	.content{
		font-size:12px;	
	}
</style>
</head>

<body>
<div align="center"><h2><font color="#FF0000">How To Use It</font></h2></div>
<h3>UI Element Information</h3>
<ol>
<li><span class="title">Status Bar</span><span class="content"> X,Y (Mouse Location)N (Node Count)L (Line Count)FX,FY (Node Location)</span></li>
<li><span class="title">Consecutive </span><span class="content">Continuously adding controls</span></li>
<li><span class="title">Show Line Length </span><span class="content">Show Line Length</span></li>
<li><span class="title">Directed Graph</span><span class="content"> When checked, indicates a directed graph, otherwise undirected graph</span></li>
<li><span class="title">Normal</span><span class="content"> In this state, you can select a node</span></li>
<li><span class="title">Add Node </span><span class="content">In this state you can left-click to add nodes painter</span></li>
<li><span class="title">Add Line</span><span class="content"> In this state you can add lines in the drawing board with the mouse</span></li>
<li><span class="title">Move Node </span><span class="content">In this state you can drag nodes painter</span></li>
<li><span class="title">Reset Runner </span><span class="content">Click Runner will be reset to the first node</span></li>
<li><span class="title">Run/Stop</span><span class="content"> Click will run Runner (provided that isRunnable = true), if you are running, click on the stop</span></li>
<li><span class="title">Clear All</span><span class="content"> Click to clear all the nodes</span></li>
<li><span class="title">Clear Line </span><span class="content">Under the premise of the selected node, click on the button to remove the selected nodes connected with a straight line</span></li>
</ol>
<h3>How to prepare a runnable graph</h3>
<ol>
<li>Select<span class="title">Add Node</span>,Adding some nodes painter</li>
<li>Select<span class="title">Add Line</span>,In drag painter added the right amount of straight line between two nodes</li>
<li>Click<span class="title">ResetRunner</span>In drawing board will see the first node Runner</li>
<li>Select<span class="title">Normal</span>,Click on any node (except the start node)</li>
<li>Then,,the start and end points set up</li>
<li>Click<span class="title">Run</span>,If the path exists between the start and end points, will be able to see from the beginning to the end of Runner</li>
</ol>
<h3>Menu</h3>
<ol>
<li><span class="title">File-Export</span>,Select json file import node information to the drawing board</li>
<li><span class="title">File-Export</span>,Export the current node information Sketchpad</li>
</ol>
<h3>Note</h3>
<ol>
<li>If you are running does not satisfy the conditions,Lower right corner of the status icon will be grayed out when click <span class="title">Run</span></li>
<li>If you want to delete a node, the mouse moved to the top of the node, right-click the node</li>
</ol>

<h3>The Example</h3>
<img alt="1_en.png" src="1_en.png"/><br/>
<img alt="2_en.png" src="2_en.png"/><br/>
<img alt="3_en.png" src="3_en.png"/><br/>
<img alt="4_en.png" src="4_en.png"/><br/>
<img alt="5_en.png" src="5_en.png"/><br/>
</body>
</html>
